<template>
  <div class="charts" ref="echarts">柱状图</div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "BarEcharts",
  mounted() {
    var BarEcharts = echarts.init(this.$refs.echarts);
    var option;
    option = {
      xAxis: {
        type: "category",
        show: false,
      },
      yAxis: {
        show: false,
      },
      // 图表样式
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130, 70, 110, 130, 110, 130],
          type: "bar",
          // showBackground: true,
          // backgroundStyle: {
          //   color: "rgba(180, 180, 180, 0.2)",
          // },
        },
      ],
      // 布局
      grid: {
        top: 0,
        right: 0,
        left: 0,
        bottom: 0,
      },
      // 悬浮提示
      tooltip: {
        show: true,
      },
    };

    option && BarEcharts.setOption(option);
  },
};
</script>

<style scoped>
.charts {
  width: 100%;
  height: 100%;
}
</style>